<template>
  <div class="memory-meter-container">
    <p class="memory-meter-title">故障概览</p>
    <div
      id="breakdownCicle"
      class="memory-meter-box"
    >
    </div>
    <div class="memory-title-box">
      <p class="memory-title-number">{{breakDownTotal}}</p>
      <p class="memory-title-unit">个</p>
    </div>
  </div>
</template>
<script>
export default {
  components: {},
  mounted() {
    this.getBreakDownInfo();
    this.timer = setInterval(() => {
      this.getBreakDownInfo();
    }, 60000)
    window.addEventListener("resize", () => { this.myCharts.resize(); });
  },
  destroyed() {
    clearInterval(this.timer);
  },
  data() {
    return {
      breakDownData: [],
      breakDownTotal: 23,
      breakDownDataRepeat: {
        information: 0,
        warning: 0,
        average: 0,
        high: 0,
        disaster: 0
      },
      timer: null,
      myCharts: null
    };
  },
  methods: {
    creatCicle() {
      var echarts = require("echarts");
      var myChart = echarts.init(document.getElementById("breakdownCicle"));
      this.myCharts = myChart;
      myChart.setOption({
        tooltip: {
          trigger: "item",
        },
        legend: {
          orient: "vertical",
          right: 8,
          top: 30,
          itemWidth: 10,
          itemHeight: 10,
          textStyle: {
            color: "#fff",
          },
          data: ["灾难", "严重", "一般", "警告", "信息"]
        },
        color: ['#EA0031', '#0C99DE', '#4EB6C3', '#999', '#fff'],
        series: [
          {
            name: "访问来源",
            type: "pie",
            radius: ["60%", "70%"],
            center: ['40%', '50%'],
            avoidLabelOverlap: false,
            legendHoverLink: false,
            hoverAnimation: false,
            label: {
              normal: {
                formatter: '{c}',
                textStyle: {
                  color: '#fff',
                  fontWeight: "bold",
                }
              }
            },
            labelLine: {
              normal: {
                show: true
              }
            },
            data: [
              { value: this.breakDownData[4], name: "灾难" },
              { value: this.breakDownData[3], name: "严重" },
              { value: this.breakDownData[2], name: "一般" },
              { value: this.breakDownData[1], name: "警告" },
              { value: this.breakDownData[0], name: "信息" }
            ]
          }
        ]
      });
    },
    getBreakDownInfo() {
      var _this = this;
      var data = {
        jsonrpc: "2.0",
        "method": "trigger.get",
        "params": {
          "output": [
            "triggerid",
            "description",
            "priority"
          ],
          "filter": {
            "value": 1
          },
          "sortfield": "priority",
          "sortorder": "DESC"
        },
        auth: localStorage.getItem("auth"),
        id: localStorage.getItem("currentId")
      };
      this.$http.post("/zabbix/api_jsonrpc.php", data).then(
        res => {
          if (res.result) {
            _this.breakDownData = [],
              _this.breakDownDataRepeat = {
                information: 0,
                warning: 0,
                average: 0,
                high: 0,
                disaster: 0
              },
              // _this.breakDownTotal=res.result.length//暂时过滤掉一个
              // for(let item of res.result){
              //   if(item.triggerid!="16147"){
              //     switch(item.priority){
              //         case '1':
              //           _this.breakDownDataRepeat.information++
              //           break;
              //         case '2':
              //           _this.breakDownDataRepeat.warning++
              //           break;
              //         case '3':
              //           _this.breakDownDataRepeat.average++
              //           break;
              //         case '4':
              //           _this.breakDownDataRepeat.high++
              //           break;
              //         case '5':
              //           _this.breakDownDataRepeat.disaster++
              //           break;
              //     }
              //   }
              // }
              _this.breakDownTotal = 5
            _this.breakDownDataRepeat.information = 1
            _this.breakDownDataRepeat.warning = 2
            _this.breakDownDataRepeat.average = 2
            _this.breakDownDataRepeat.high = 0
            _this.breakDownDataRepeat.disaster = 0
            for (let item in _this.breakDownDataRepeat) {
              _this.breakDownData.push(Math.round(_this.breakDownDataRepeat[item]))
            }
            _this.creatCicle();
          }
        },
        err => {
          console.log(err);
        }
      );
    }
  }
};
</script>

<style scoped lang="scss">
.memory-meter-container {
  position: relative;
  width: 100%;
  height: 50%;
  background: url("../assets/images/bg111.png") no-repeat center;
  background-size: 100% 100%;
}
.memory-meter-title {
  color: #fff;
  padding-top: 20px;
  padding-left: 25px;
  font-size: 16px;
  // font-weight: bold;
}
.memory-meter-box {
  margin-left: 30px;
  width: 80%;
  height: 80%;
}
.memory-title-box {
  position: absolute;
  top: 36%;
  left: 36%;
}
.memory-title-number {
  color: #fff;
  font-size: 50px;
  font-weight: bold;
}
.memory-title-unit {
  color: #4db6c4;
  text-align: center;
  font-weight: bold;
  font-size: 20px;
}
</style>
